<template>
  <!-- 重复立项监测 -->
  <div id="reproject-monitor">
    <div class="operate-form">
      <a-button type="primary" @click="addReproject"
        >新增重复立项监测机制</a-button
      >
    </div>
    <a-table :columns="columns" :data-source="data">
      <template #t1="{ record }">
        <a-switch 
          checked-children="开" 
          un-checked-children="关" 
          :checked="record.t1 === '1' ? true : false"
          @change="handelStatus(record)"
        />
      </template>
      <template #action="{ record }">
        <a-space>
          <a>编辑</a>
          <a-popconfirm
            v-if="data.length"
            title="确定删除?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="onDelete(record.key)"
          >
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "重复立项监测名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "创建人",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "最新编辑时间",
          dataIndex: "t3",
          key: "t3",
        },
        {
          title: "备注",
          key: "t2",
          dataIndex: "t2",
        },
        {
          title: "状态",
          key: "t1",
          slots: { customRender: "t1" },
        },
        {
          title: "操作",
          key: "action",
          slots: { customRender: "action" },
        },
      ],
      data: [
        {
          key: "1",
          name: "项目申报重复立项监测",
          age: "张三",
          t3: "2021-7-14",
          t2: "我是备注",
          t1: 1,
        },
        {
          key: "2",
          name: "计划编报重复立项监测",
          age: "张三",
          t3: "2021-7-14",
          t2: "我是备注",
          t1: 0,
        },
      ],
    };
  },

  components: {},

  computed: {},

  mounted() {},
  methods: {
    addReproject() {
      // 新增重复立项机制
    },
    onDelete(key) {
      // 删除当前行
      alert("删除当前行  key为" + key);
    },
    handelStatus(record) {
      // 处理状态
      console.log('record',record);
      this.data.map((val) => {
        if(val.key === record.key) {
          val.t1 == 1 ? 0 : 1
        }
      })
      // record.t1 = !record.t1;
      // 
    }
  },
};
</script>
<style lang='less' scoped>
#reproject-monitor {
  .operate-form {
    display: flex;
    justify-content: flex-end;
  }
}
</style>